<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>geo-autocomplete demos</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../ui.geo_autocomplete.js"></script>
<script type="text/javascript">
$().ready(function() {
	demo1();
	demo2();
	demo3();
	demo4();
});

function demo1() {
	$('#demo1_location').geo_autocomplete();
}

// the select function uses the viewport of the chosen location to relocate the map
function demo2() {
    var map = new google.maps.Map(document.getElementById("demo2_map"), { mapTypeId: google.maps.MapTypeId.ROADMAP });

	$('#demo2_location').geo_autocomplete({
		select: function(_event, _ui) {
			if (_ui.item.viewport) map.fitBounds(_ui.item.viewport);
		}
	});
}

function demo3() {
	$('#demo3_location').geo_autocomplete({
		geocoder_region: 'Africa',
		geocoder_types: 'country',
		mapheight: 100, mapwidth: 200, maptype: 'hybrid'
	});
}

</script>

<link type="text/css" href="../lib/jquery-ui/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<style type="text/css">
.ui-autocomplete { overflow-y: auto; width:300px; }
* html .ui-autocomplete { /* IE max- */height: expression( this.scrollHeight > 320 ? "320px" : "auto" ); }
.ui-autocomplete { max-height: 320px; }
.ui-autocomplete li { font-size:10pt; }
</style>

</head>
<body>
<h1>geo-autocomplete demos</h1>
<h3>Basic use</h3>
<p>Location: <input type="text" id="demo1_location" size="50" /></p>

<h3>Fast map relocation</h3>
<p>Location: <input type="text" id="demo2_location" size="50" /></p>
<div id="demo2_map" style="width:400px;height:300px;"></div>

<h3>Restricted to Countries within Africa</h3>
<p>Location: <input type="text" id="demo3_location" size="50" /></p>

</body>
</html>
